<template>
	<div>
		<!-- 轮播图区域 -->
		<mt-swipe :auto="4000">
			<mt-swipe-item v-for="item in list" :key="item.url">
				<img :src="item.url"/>
			</mt-swipe-item>
		</mt-swipe>
		
		<ul class="mui-table-view mui-grid-view mui-grid-9">
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<router-link to="/home/newslist">
				<img src="../../images/xwzx.png" />
				<div class="mui-media-body">新闻资讯</div></router-link></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<router-link to="/home/photolist">
				<img src="../../images/tpxx.png" />
				<div class="mui-media-body">图片分享</div></router-link></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
				<router-link to="/home/shopping">
				<img src="../../images/wdgm.png" />
				<div class="mui-media-body">商品购买</div>
				</router-link>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
				<img src="../../images/lyfk.png" />
				<div class="mui-media-body">留言反馈</div></a></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
				<img src="../../images/sp.png" />
				<div class="mui-media-body">视频专区</div></a></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
				<img src="../../images/lxwm.png" />
				<div class="mui-media-body">联系我们</div></a></li>
		</ul> 
	</div>
</template>

<script>
	import {Toast} from 'mint-ui'
	export default{
		data(){
			return{
				list:[]
			};
		},
		created(){
			this.getLunBo();
		},
		methods:{
			getLunBo(){
				this.$http.get('http://localhost:3001/message').then(result=>{
					if(result.body){
					this.list = result.body;
					}
					else{
						Toast("失败");
					}
				})
			}
		}
	}
</script>

<style scoped>
	.mint-swipe{
		height: 200px;
	}
	.mint-swipe-item img{
		width:100%;
		height: 100%;
	}
	.mint-swipe-item:nth-child(1){
			background: red;
		}
	.mint-swipe-item:nth-child(2){
			background: #4CAF50;
		}
	.mint-swipe-item:nth-child(3){
			background: #26A2FF;
		}
		.mui-grid-view.mui-grid-9{
			background: #ffffff;
		}
		.mui-grid-view.mui-grid-9 .mui-table-view-cell{
			border: none;
		}
		.mui-grid-view.mui-grid-9 img{
			width: 50px;
			height: 50px;
		}
</style>
